<template>
  <div class="scan-box">
    <div class="kongscan"></div>
    <div  id="bcid" ref="scan">
      <div @click="scanopen" ><span>扫描</span><i class="iconfont icon-sousuoxiawu-"></i> </div>
    </div>
    <div class="input-order-number">
      <img src="../assets/input.png">
      <input type="text" v-model="code" ref='code'  @keyup.enter='commitInput' :placeholder="placeholdertext" >
      <div class="button-add" @click="commitInput">确认</div>
    </div>
  </div>
</template>
<script>
  let scan = null
  var ws = null
  var wo = null
  import { bus } from '../utils/bus'
  export default {
    name: "scan",
    props: ['loadingData', 'switchScan','textre','deliveryNoSF'],
    data() {
      return {
        codeUrl: '',
        code: '',
        activeFlash: false,
        imgSelect: require('../assets/flash.png'),
        scanState: false,
        placeholdertext:'手动输入子单号...'
      }
    },
    created() {
      window.QRScanAjax = this.QRScanAjax;
      this.$store.state.ScanQRCodeInputName = 'code';
      window.TellVue_QRScanResult_Ajax = this.QRScanAjax;
      if(this.textre){
        this.placeholdertext = this.textre;
      }
      if(this.deliveryNoSF){

        this.code = this.deliveryNoSF;
        this.$emit('scanData', this.code)
        this.code = ''
      }
    },
    mounted() {
      this.$refs['code'].focus();
    },
    methods: {
      scanopen(){
        // 安卓
        try {
          CallAndroidOrIOS.ContinuousScan();
        }
        catch (error) {}
        // 苹果
        try {
          window.webkit.messageHandlers.messageSend.postMessage({ a: '调用app原生半屏扫描二维码/条码' })
        }
        catch (error) {}
      },
      // 接收iOS/android值
      QRScanAjax  (qrcode){
        let inputName = this.$store.state.ScanQRCodeInputName;
        this[inputName] = qrcode;
        this.commitInput();
      },
      /**
       * 提交输入框输入的内容
       **/
      commitInput() {
        if(this.code !== '') {
          this.code = this.code.replace(/\s+/g,"")
          this.$emit('scanData', this.code)
          this.code = ''
        }
      }
    }
  }
</script>
<style scoped lang="less">
  @import "publicLess.less";
  .scan-box {
    background-color: rgba(0,0,0,0.0);
    .kongscan {
      width: 100%;
      height: 48px;
    }
  }
  .scan-box {
    width: 100%;
    z-index: 1;
  }
  #bcid {
    width: 100%;
    // height: 245px;
    height: 140px;
    z-index: 8888;
    background-color: #f4f4f4;
    & > div {
      width: 100%;
      height: 104px;
      // height: 224px;
      font-size: 32/50rem;
      text-align: center;
      color: @PublicColor;
      // line-height: 224px;
      line-height: 104px;
      span {
        margin-right: 10/50rem;
      }
      i {
        font-size: 35/50rem;
      }
    }
  }
  .scan {
    height: 100%;
  }
  .input-order-number {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
    flex-wrap: nowrap;
    background-color:#F4F4F4;
  }
  .input-order-number img {
    width: 40px;
    padding:12/50rem;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
  }
  .input-order-number input {
    flex: 1;
    border: none;
    line-height: 37px;
    height:37px;
    padding-left: 10/50rem;
    box-sizing: border-box;
    outline: none;
  }
  .input-order-number .button-add {
    width: 37px;
    height: 37px;
    font-size: 28/50rem;
    line-height: 40px;
    margin:0 10/50rem;
    text-align: center;
    background-color: @PublicColor;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
</style>